<template>
  <div class="w-[100%] h-[100%]">
    <div class="w-[100%] h-[100%] px-16 py-6 box-border preditSetting2">
      <div class="flex items-center gap-4 mb-3 text-base">
        <div class="flex items-center">
          <span class="mr-2">预测管道</span>
          <el-select v-model="predictPipeline" placeholder="请选择预测管道" style="width: 100px">
            <el-option
              v-for="item in pipelineList"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="flex items-center">
          <span class="mr-2">运行模式</span>
          <el-select
            v-model="operationMode"
            placeholder="请选择运行模式"
            style="width: 180px"
            multiple
            collapse-tags
            collapse-tags-tooltip
            disabled
          >
            <el-option
              v-for="item in operationModeList"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="flex items-center">
          <span class="mr-2">工况类型</span>
          <el-cascader
            v-model="workType"
            :options="operationConditions"
            placeholder="请选择工况类型"
            clearable
            class="!w-[250px]"
          />
        </div>
        <div class="flex items-center">
          <span class="mr-2">模拟时间</span>
          <el-input v-model="simulationTime" class="!w-[100px] mr-2" />
          <span>小时</span>
        </div>
        <div class="flex items-center">
          <span class="mr-2">图表生成时间间隔</span>
          <el-input v-model="chartTimeInterval" class="!w-[100px] mr-2" />
          <span>分钟</span>
        </div>
      </div>
      <div class="flex w-full h-full">
        <div class="w-[65%] h-[calc(100%-40px)] relative">
          <div
            class="absolute top-0 left-0 w-[50%] h-2/3 border border-solid !border-zinc-500/50 p-4 box-border overflow-y-auto"
          >
            <div class="flex items-center gap-10">
              <div class="px-2 rounded-md border-solid border-[2px] border-[#f8cbad]">乌百线</div>
              <div class="flex items-center">
                <span class="mr-4">管道沿线地温</span>
                <el-input v-model="wb_pipeTemperature" class="!w-[100px] mr-4" /><span class=""
                  >℃</span
                >
              </div>
            </div>
            <div class="flex items-center mt-3">
              <span class="w-32">注入油品类型</span>
              <el-select
                v-model="wb_inputOilType"
                placeholder="请选择油品种类"
                style="width: 250px"
              >
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>

            <div class="flex items-center mt-3">
              <span class="w-32">启输时长</span>
              <el-input v-model="wb_startDuration" class="!w-[250px] mr-4" /><span class=""
                >小时</span
              >
            </div>
            <div class="flex items-center mt-3">
              <span class="w-32">停输时长</span>
              <el-input v-model="wb_stopDuration" class="!w-[250px] mr-4" /><span class=""
                >小时</span
              >
            </div>
            <div class="mt-3">
              <div
                class="flex items-center gap-4 cursor-pointer"
                @click="wb_settingsVisible = !wb_settingsVisible"
              >
                <el-icon v-if="wb_settingsVisible" class="mr-2">
                  <ArrowDown />
                </el-icon>
                <el-icon v-else class="mr-2">
                  <ArrowRight />
                </el-icon>
                控制条件设置
              </div>
              <div v-show="wb_settingsVisible">
                <div class="flex items-center mt-3">
                  <span class="w-32">首站出站流量</span
                  ><el-input v-model="wb_outFlow" class="!w-[250px] mr-4" /><span class=""
                    >m³/h</span
                  >
                </div>
                <div class="flex items-center mt-3">
                  <span class="w-32">首站出站温度</span
                  ><el-input v-model="wb_outTemp" class="!w-[250px] mr-4" /><span class="">℃</span>
                </div>
                <div class="flex items-center mt-3">
                  <span class="w-32">末站进站压力</span
                  ><el-input v-model="wb_inPres" class="!w-[250px] mr-4" /><span class="">MPa</span>
                </div>
              </div>
            </div>
            <div class="mt-6">
              <div class="flex items-center gap-4">
                <img :src="rightIcon" class="w-6 h-5" />
                泵机组配置
              </div>
              <div class="w-4/5 mt-4 text-base bg-white">
                <div class="flex h-[50px]">
                  <div
                    class="bg_table_header flex items-center justify-center border w-[120px] box-border"
                  >
                    泵站
                  </div>
                  <div
                    class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
                  >
                    泵配置
                  </div>
                </div>
                <div class="flex h-[40px]">
                  <div
                    class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
                  >
                    泵站1
                  </div>
                  <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                    <div class="flex justify-between w-full">
                      <div><el-checkbox v-model="wb_pump1">P-1</el-checkbox></div>
                      <div><el-checkbox v-model="wb_pump2">P-2</el-checkbox></div>
                      <div><el-checkbox v-model="wb_pump3">P-3</el-checkbox></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="absolute left-0 bottom-0 w-[50%] h-[30%] border border-solid !border-zinc-500/50 p-4 box-border overflow-y-auto"
          >
            <div class="flex items-center gap-10">
              <div class="px-2 rounded-md border-solid border-[2px] border-[#f8cbad]">调油一线</div>
              <div class="flex items-center">
                <span class="mr-4">管道沿线地温</span>
                <el-input v-model="ty_pipeTemperature" class="!w-[100px] mr-4" /><span class=""
                  >℃</span
                >
              </div>
            </div>
            <div class="mt-3">
              <div
                class="flex items-center gap-4 cursor-pointer"
                @click="ty_settingsVisible = !ty_settingsVisible"
              >
                <el-icon v-if="ty_settingsVisible" class="mr-2">
                  <ArrowDown />
                </el-icon>
                <el-icon v-else class="mr-2">
                  <ArrowRight />
                </el-icon>
                控制条件设置
              </div>
              <div v-show="ty_settingsVisible">
                <div class="flex items-center mt-3">
                  <span class="w-32">末站进站压力</span
                  ><el-input v-model="ty_inPres" class="!w-[250px] mr-4" /><span class="">MPa</span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="absolute top-0 right-0 w-[48%] h-[48%] border border-solid !border-zinc-500/50 p-4 box-border overflow-y-auto"
          >
            <div class="flex items-center gap-10">
              <div class="px-2 rounded-md border-solid border-[2px] border-[#f8cbad]">百克线</div>
              <div class="flex items-center">
                <span class="mr-4">管道沿线地温</span>
                <el-input v-model="bk_pipeTemperature" class="!w-[100px] mr-4" /><span class=""
                  >℃</span
                >
              </div>
            </div>
            <div class="mt-3">
              <div
                class="flex items-center gap-4 cursor-pointer"
                @click="bk_settingsVisible = !bk_settingsVisible"
              >
                <el-icon v-if="bk_settingsVisible" class="mr-2">
                  <ArrowDown />
                </el-icon>
                <el-icon v-else class="mr-2">
                  <ArrowRight />
                </el-icon>
                控制条件设置
              </div>
              <div v-show="bk_settingsVisible">
                <div class="flex items-center mt-3">
                  <span class="w-32">末站进站压力</span
                  ><el-input v-model="bk_inPres" class="!w-[250px] mr-4" /><span class="">MPa</span>
                </div>
              </div>
            </div>
            <div
              class="box-border flex flex-col items-center justify-between w-full mt-4 bg-white bg_detail"
            >
              <div class="w-full text-base">
                <div class="flex h-[50px]">
                  <div
                    class="box-border flex items-center justify-center w-[87.5px] px-2 text-center border bg_table_header"
                  >
                    油品来源
                  </div>
                  <div
                    class="box-border flex items-center justify-center flex-1 text-center topBorder bottomBorder rightBorder bg_table_header"
                  >
                    油品种类
                  </div>
                  <div
                    class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
                  >
                    批次输量(m³/h)
                  </div>
                  <div
                    class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
                  >
                    批次温度(℃)
                  </div>
                </div>
                <div class="flex h-[40px] shadow-md">
                  <div
                    class="flex items-center justify-center w-[70px] px-2 bottomBorder rightBorder leftBorder2 text-sm"
                  >
                    乌尔禾来油
                  </div>
                  <div class="box-border flex items-center flex-1 px-5 rightBorder bottomBorder">
                    <el-select v-model="wb_inputOilType" placeholder="请选择油品种类">
                      <el-option
                        v-for="item in oilList"
                        :key="item.id"
                        :label="item.chinese_name"
                        :value="item.oils_name"
                      />
                    </el-select>
                  </div>
                  <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                    <el-input v-model="bk_oilFlow1" class="no-style-input !text-base" />
                  </div>
                  <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                    <el-input v-model="bk_oilTemperature1" class="no-style-input !text-base" />
                  </div>
                </div>
                <div class="flex h-[40px] shadow-md">
                  <div
                    class="flex items-center justify-center w-[70px] px-2 bottomBorder rightBorder leftBorder2 text-sm"
                  >
                    百联来油
                  </div>
                  <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                    <el-select v-model="bk_oilType" placeholder="请选择油品种类">
                      <el-option
                        v-for="item in oilList"
                        :key="item.id"
                        :label="item.chinese_name"
                        :value="item.oils_name"
                      />
                    </el-select>
                  </div>
                  <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                    <el-input v-model="bk_oilFlow2" class="no-style-input !text-base" />
                  </div>
                  <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                    <el-input v-model="bk_oilTemperature2" class="no-style-input !text-base" />
                  </div>
                </div>
              </div>
            </div>
            <div class="w-4/5 mt-4 text-base" v-if="!isShowSHYZ">
              <div class="flex items-center gap-4 mb-4">
                <img :src="rightIcon" class="w-6 h-5" />
                泵机组配置
              </div>
              <div class="bg-white">
                <div class="flex h-[50px]">
                  <div
                    class="bg_table_header flex items-center justify-center border w-[120px] box-border"
                  >
                    泵站
                  </div>
                  <div
                    class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
                  >
                    泵配置
                  </div>
                </div>
                <div class="flex h-[40px]">
                  <div
                    class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
                  >
                    泵站1
                  </div>
                  <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                    <div class="flex justify-between w-full">
                      <div><el-checkbox v-model="bk_pump1">P-1</el-checkbox></div>
                      <div><el-checkbox v-model="bk_pump2">P-2</el-checkbox></div>
                      <div><el-checkbox v-model="bk_pump3">P-3</el-checkbox></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="absolute bottom-0 right-0 w-[48%] h-[48%] border border-solid !border-zinc-500/50 p-4 box-border overflow-y-auto"
          >
            <div class="flex items-center gap-10">
              <div class="px-2 rounded-md border-solid border-[2px] border-[#f8cbad]">新81#线</div>
              <div class="flex items-center">
                <span class="mr-4">管道沿线地温</span>
                <el-input v-model="new81_pipeTemperature" class="!w-[100px] mr-4" /><span class=""
                  >℃</span
                >
              </div>
            </div>
            <div class="flex items-center mt-3">
              <span class="w-32">注入油品类型</span>
              <el-select
                v-model="new81_inputOilType"
                placeholder="请选择油品种类"
                style="width: 250px"
              >
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div class="mt-3">
              <div
                class="flex items-center gap-4 cursor-pointer"
                @click="new81_settingsVisible = !new81_settingsVisible"
              >
                <el-icon v-if="new81_settingsVisible" class="mr-2">
                  <ArrowDown />
                </el-icon>
                <el-icon v-else class="mr-2">
                  <ArrowRight />
                </el-icon>
                控制条件设置
              </div>
              <div v-show="new81_settingsVisible">
                <div class="flex items-center mt-3">
                  <span class="w-32">首站出站流量</span
                  ><el-input v-model="new81_outFlow" class="!w-[250px] mr-4" /><span class=""
                    >m³/h</span
                  >
                </div>
                <div class="flex items-center mt-3">
                  <span class="w-32">首站出站温度</span
                  ><el-input v-model="new81_outTemp" class="!w-[250px] mr-4" /><span class=""
                    >℃</span
                  >
                </div>
                <div class="flex items-center mt-3">
                  <span class="w-32">末站进站压力</span
                  ><el-input v-model="new81_inPres" class="!w-[250px] mr-4" /><span class=""
                    >MPa</span
                  >
                </div>
              </div>
            </div>
            <div class="mt-6">
              <div class="flex items-center gap-4">
                <img :src="rightIcon" class="w-6 h-5" />
                泵机组配置
              </div>
              <div class="w-4/5 mt-4 text-base bg-white">
                <div class="flex h-[50px]">
                  <div
                    class="bg_table_header flex items-center justify-center border w-[120px] box-border"
                  >
                    泵站
                  </div>
                  <div
                    class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
                  >
                    泵配置
                  </div>
                </div>
                <div class="flex h-[40px]">
                  <div
                    class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
                  >
                    泵站1
                  </div>
                  <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                    <div class="flex justify-between w-full">
                      <div><el-checkbox v-model="new81_pump1">P-1</el-checkbox></div>
                      <div><el-checkbox v-model="new81_pump2">P-2</el-checkbox></div>
                      <div><el-checkbox v-model="new81_pump3">P-3</el-checkbox></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[35%] h-full" v-if="isShowJZ">
          <JZJ ref="JZJRef" :oilList="oilList"></JZJ>
        </div>
        <div class="w-[35%] h-full" v-if="isShowQGX">
          <QGQ ref="QGQRef"></QGQ>
        </div>
        <div class="w-[35%] h-full" v-if="isShowGDXL">
          <GDXL ref="GDXLRef"></GDXL>
        </div>
        <div class="w-[35%] h-full" v-if="isShowBJZTY">
          <BJZTY ref="BJZTYRef"></BJZTY>
        </div>
        <div class="w-[35%] h-full" v-if="isShowFMYC">
          <FMYC ref="FMYCRef"></FMYC>
        </div>
        <div class="w-[35%] h-full" v-if="isShowFlowTemp">
          <SLYWTJ
            ref="SLYWTJRef"
            :oilList="oilList"
            v-model:wb_inputOilType="wb_inputOilType"
            v-model:bk_oilType="bk_oilType"
          ></SLYWTJ>
        </div>
      </div>
    </div>
    <div class="absolute flex gap-8 right-8 bottom-10">
      <div class="flex items-center justify-center custom-button" @click="resetSimulation">
        重新模拟
      </div>
      <div
        class="flex items-center justify-center"
        :class="{ 'custom-button-not-active ': !isFormValid, 'custom-button': isFormValid }"
        @click="startPrediction"
      >
        开始预测
      </div>
    </div>
  </div>
</template>

<script setup>
import { snapdom } from '@zumer/snapdom'
import { isEqual } from 'lodash-es'
import GDXL from './abnormal/GDXL/index.vue'
import FMYC from './abnormal/FMYCGD/index.vue'
import JZJ from './normal/JZJ/index.vue'
import SLYWTJ from './normal/SLYWTJ/index.vue'
import QGQ from './normal/QGQ/index.vue'
import BJZTY from './abnormal/BJZTY/index.vue'
import {
  postSPSQUANXIAN_WTYX,
  postSPSQUANXIAN_DRA,
  postSPSQUANXIAN_PIG,
  postSPSQUANXIAN_YZ,
  postSPSQUANXIAN_SLTJ,
  postSPSQUANXIAN_LEAK,
  postSPSQUANXIAN_FMYC,
  postSPSQUANXIAN_PUMP
} from '@/api/sps.js'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import rightIcon from '@/assets/images/rightIcon.png'
import { ElMessage } from 'element-plus'
import { useSimulationStore } from '@/stores/modules/simulation'
import { useRouter } from 'vue-router'
import { watch } from 'vue'

const simulationStore = useSimulationStore()
const router = useRouter()

const GDXLRef = ref(null)
const FMYCRef = ref(null)
const JZJRef = ref(null)
const SLYWTJRef = ref(null)
const QGQRef = ref(null)
const BJZTYRef = ref(null)
const props = defineProps({
  oilList: { type: Array },
  pipelineList: { type: Array },
  operationModeList: { type: Array },
  operationConditions: { type: Array }
})

const isPredictLoading = defineModel('isPredictLoading')
const predictPipeline = defineModel('predictPipeline')

const operationMode = ref(['单油品连续输送', '顺序输送', '间歇输送', '密闭输送', '旁接罐输送'])
const workType = ref([])
const simulationTime = ref('5')
const chartTimeInterval = ref('5')

const wb_pipeTemperature = ref('10')
const wb_inputOilType = ref('WEHY_2024S')
const wb_inputOilChineseName = computed(
  () => props.oilList.find((item) => item.oils_name === wb_inputOilType.value).chinese_name
)
const wb_startDuration = ref('5')
const wb_stopDuration = ref('3')
const wb_outFlow = ref('90')
const wb_outTemp = ref('55')
const wb_inPres = ref('0.05')
const wb_pump1 = ref(false)
const wb_pump2 = ref(true)
const wb_pump3 = ref(true)
const wb_settingsVisible = ref(false)

const ty_pipeTemperature = ref('10')
const ty_inPres = ref('0.05')
const ty_settingsVisible = ref(false)

const bk_pipeTemperature = ref('10')
const bk_inPres = ref('0.05')
const bk_oilType = ref('BLY_2024S')
const bk_oilFlow1 = ref('400')
const bk_oilFlow2 = ref('450')
const bk_oilTemperature1 = ref('30')
const bk_oilTemperature2 = ref('35')
const bk_pump1 = ref(true)
const bk_pump2 = ref(true)
const bk_pump3 = ref(false)
const bk_settingsVisible = ref(false)

const new81_pipeTemperature = ref('10')
const new81_inputOilType = ref('S81Y')
const new81_outFlow = ref('300')
const new81_outTemp = ref('60')
const new81_inPres = ref('0.05')
const new81_pump1 = ref(true)
const new81_pump2 = ref(false)
const new81_pump3 = ref(false)
const new81_settingsVisible = ref(false)

// 减阻剂

const isShowJZ = ref(false)
watch(workType, (newVal) => {
  if (newVal) {
    if (newVal[1] === '加减阻剂输送') {
      isShowJZ.value = true
    } else {
      isShowJZ.value = false
    }
  } else {
    isShowJZ.value = false
  }
})

// 清管器
const isShowQGX = ref(false)
watch(workType, (newVal) => {
  if (newVal) {
    if (newVal[1] === '清管器运行') {
      isShowQGX.value = true
    } else {
      isShowQGX.value = false
    }
  } else {
    isShowQGX.value = false
  }
})

// 输量与油温调节
const isShowFlowTemp = ref(false)
watch(workType, (newVal) => {
  if (newVal) {
    if (newVal[1] === '输量与油温调节') {
      isShowFlowTemp.value = true
    } else {
      isShowFlowTemp.value = false
    }
  } else {
    isShowFlowTemp.value = false
  }
})

// 水力越站
const isShowSHYZ = ref(false)
watch(workType, (newVal) => {
  if (newVal) {
    if (newVal[1] === '水力越站') {
      isShowSHYZ.value = true
    } else {
      isShowSHYZ.value = false
    }
  } else {
    isShowSHYZ.value = false
  }
})

// 管道泄漏
const isShowGDXL = ref(false)
watch(workType, (newVal) => {
  if (newVal) {
    if (newVal[1] === '管道泄漏') {
      isShowGDXL.value = true
    } else {
      isShowGDXL.value = false
    }
  }
})

// 阀门异常
const isShowFMYC = ref(false)
watch(workType, (newVal) => {
  if (newVal) {
    if (newVal[1] === 'ESD阀门异常关断') {
      isShowFMYC.value = true
    } else {
      isShowFMYC.value = false
    }
  } else {
    isShowFMYC.value = false
  }
})

// 泵机组停运
const isShowBJZTY = ref(false)
watch(workType, (newVal) => {
  if (newVal) {
    if (newVal[1] === '泵机组停运') {
      isShowBJZTY.value = true
    } else {
      isShowBJZTY.value = false
    }
  } else {
    isShowBJZTY.value = false
  }
})

// 重新模拟
const resetSimulation = () => {
  router.go(0)
}

const isFormValid = computed(() => {
  // 基础必填字段
  const baseFields = [
    predictPipeline.value,
    operationMode.value,
    workType.value,
    simulationTime.value,
    chartTimeInterval.value
  ]
  if (!baseFields.every((field) => field && (Array.isArray(field) ? field.length > 0 : true))) {
    return false
  }

  // 乌百线校验
  const wbFields = [
    wb_pipeTemperature.value,
    wb_inputOilType.value,
    wb_startDuration.value,
    wb_stopDuration.value,
    wb_outFlow.value,
    wb_outTemp.value,
    wb_inPres.value
  ]
  if (!wbFields.every((field) => field)) return false

  // 泵机组配置校验（至少选一个）
  if (!wb_pump1.value && !wb_pump2.value && !wb_pump3.value) return false

  // 百克线校验
  const bkFields = [
    bk_pipeTemperature.value,
    bk_inPres.value,
    bk_oilFlow1.value,
    bk_oilTemperature1.value,
    bk_oilType.value,
    bk_oilFlow2.value,
    bk_oilTemperature2.value
  ]
  if (!bkFields.every((field) => field)) return false
  if (!bk_pump1.value && !bk_pump2.value && !bk_pump3.value) return false

  // 调油一线校验
  const tyFields = [ty_pipeTemperature.value, ty_inPres.value]
  if (!tyFields.every((field) => field)) return false

  // 新81#线校验
  const new81Fields = [
    new81_pipeTemperature.value,
    new81_inputOilType.value,
    new81_outFlow.value,
    new81_outTemp.value,
    new81_inPres.value
  ]
  if (!new81Fields.every((field) => field)) return false
  if (!new81_pump1.value && !new81_pump2.value && !new81_pump3.value) return false

  // 如果选择了加减阻剂输送工况,需要进行额外的校验
  if (workType.value?.[1] === '加减阻剂输送') {
    if (!JZJRef.value?.isFormValid) {
      return false
    }
  }

  // 如果选择了输量与油温调节工况,需要进行额外的校验
  if (workType.value?.[1] === '输量与油温调节') {
    if (!SLYWTJRef.value?.isFormValid) {
      return false
    }
  }

  // 如果选择了清管器运行工况,需要进行额外的校验
  if (workType.value?.[1] === '清管器运行') {
    if (!QGQRef.value?.isFormValid) {
      return false
    }
  }

  // 如果选择了管道泄漏工况,需要进行额外的校验
  if (workType.value?.[1] === '管道泄漏') {
    if (!GDXLRef.value?.isFormValid) {
      return false
    }
  }

  // ESD阀门异常关断校验
  if (workType.value?.[1] === 'ESD阀门异常关断') {
    if (!FMYCRef.value?.isFormValid) {
      return false
    }
  }

  // 泵机组停运校验
  if (workType.value?.[1] === '泵机组停运') {
    if (!BJZTYRef.value?.isFormValid) {
      return false
    }
  }

  return true
})

const startPrediction = async () => {
  // 基础必填字段
  const baseFields = [
    { value: predictPipeline.value, name: '预测管道' },
    { value: operationMode.value, name: '运行模式' },
    { value: workType.value, name: '工况类型' },
    { value: simulationTime.value, name: '模拟时间' },
    { value: chartTimeInterval.value, name: '图表生成时间间隔' }
  ]
  for (const field of baseFields) {
    if (!field.value || (Array.isArray(field.value) && field.value.length === 0)) {
      ElMessage.error(`${field.name}不能为空`)
      return
    }
  }

  // 乌百线校验
  const wbFields = [
    { value: wb_pipeTemperature.value, name: '乌百线管道沿线地温' },
    { value: wb_inputOilType.value, name: '乌百线注入油品类型' },
    { value: wb_startDuration.value, name: '乌百线启输时长' },
    { value: wb_stopDuration.value, name: '乌百线停输时长' },
    { value: wb_outFlow.value, name: '乌百线首站出站流量' },
    { value: wb_outTemp.value, name: '乌百线首站出站温度' },
    { value: wb_inPres.value, name: '乌百线末站进站压力' }
  ]
  for (const field of wbFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return
    }
  }
  if (!wb_pump1.value && !wb_pump2.value && !wb_pump3.value) {
    ElMessage.error('乌百线泵机组至少选择一个')
    return
  }

  // 百克线校验
  const bkFields = [
    { value: bk_pipeTemperature.value, name: '百克线管道沿线地温' },
    { value: bk_inPres.value, name: '百克线末站进站压力' },
    { value: bk_oilType.value, name: '百克线油品种类' },
    { value: bk_oilFlow1.value, name: '百克线油品1输量' },
    { value: bk_oilTemperature1.value, name: '百克线油品1温度' },
    { value: bk_oilFlow2.value, name: '百克线油品2输量' },
    { value: bk_oilTemperature2.value, name: '百克线油品2温度' }
  ]
  for (const field of bkFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return
    }
  }
  if (!bk_pump1.value && !bk_pump2.value && !bk_pump3.value) {
    ElMessage.error('百克线泵机组至少选择一个')
    return
  }

  // 调油一线校验
  const tyFields = [
    { value: ty_pipeTemperature.value, name: '调油一线管道沿线地温' },
    { value: ty_inPres.value, name: '调油一线末站进站压力' }
  ]
  for (const field of tyFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return
    }
  }

  // 新81#线校验
  const new81Fields = [
    { value: new81_pipeTemperature.value, name: '新81#线管道沿线地温' },
    { value: new81_inputOilType.value, name: '新81#线油品种类' },
    { value: new81_outFlow.value, name: '新81#线首站出站流量' },
    { value: new81_outTemp.value, name: '新81#线首站出站温度' },
    { value: new81_inPres.value, name: '新81#线末站进站压力' }
  ]
  for (const field of new81Fields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return
    }
  }
  if (!new81_pump1.value && !new81_pump2.value && !new81_pump3.value) {
    ElMessage.error('新81#线泵机组至少选择一个')
    return
  }

  // 减阻剂参数校验
  if (workType.value[1] === '加减阻剂输送') {
    if (!JZJRef.value.validateSettings()) {
      return
    }
  }
  // 输量与油温调节
  if (workType.value[1] === '输量与油温调节') {
    if (!SLYWTJRef.value.validateSettings()) {
      return
    }
  }

  // 清管器参数校验
  if (workType.value[1] === '清管器运行') {
    if (!QGQRef.value.validateSettings()) {
      return
    }
  }

  // 管道泄漏参数校验
  if (workType.value[1] === '管道泄漏') {
    if (!GDXLRef.value.validateSettings()) {
      return
    }
  }

  // ESD阀门异常关断参数校验
  if (workType.value[1] === 'ESD阀门异常关断') {
    if (!FMYCRef.value.validateSettings()) {
      return
    }
  }

  // 泵机组停运参数校验
  if (workType.value[1] === '泵机组停运') {
    if (!BJZTYRef.value.validateSettings()) {
      return
    }
  }
  // 通过校验后，执行预测逻辑
  // 截图前先打开控制条件设置
  wb_settingsVisible.value = true
  ty_settingsVisible.value = true
  bk_settingsVisible.value = true
  new81_settingsVisible.value = true

  // 截图
  const makeScreenshot = async () => {
    const card = document.querySelector('.preditSetting2')
    const capture = await snapdom(card, {
      scale: 1, // 2倍清晰度
      backgroundColor: 'rgb(246, 246, 246)', // 背景色
      embedFonts: true, // 内嵌字体
      compress: true // 压缩优化
    })
    // const png = await capture.toPng()
    // 直接触发下载
    // await capture.download({
    //   format: 'png',
    //   filename: '参数设置'
    // })
    simulationStore.preditParams = capture
    // console.log('🐯 ~ makeScreenshot ~ image:', capture)
  }
  setTimeout(() => {
    makeScreenshot()
  })
  try {
    // 所有验证通过，继续执行预测逻辑
    simulationStore.curPipeLine = '全线'
    isPredictLoading.value = true
    simulationStore.predictPipeline = '乌百线（乌尔禾站-百克站）'
    simulationStore.chartTimeInterval = Number(chartTimeInterval.value)

    // 给能耗优化需要的参数
    simulationStore.T_g_WBX = wb_pipeTemperature.value
    simulationStore.T_g_BKX = bk_pipeTemperature.value
    simulationStore.T_g_701_ZZ = ty_pipeTemperature.value
    simulationStore.T_g_81_701 = new81_pipeTemperature.value
    simulationStore.Oil_in0 = wb_inputOilType.value
    simulationStore.Oil_in1 = bk_oilType.value
    simulationStore.Oil_in2 = new81_inputOilType.value
    simulationStore.QS_time = wb_startDuration.value
    simulationStore.TS_time = wb_stopDuration.value

    let res
    const baseParams = {
      // 参数校准得到结果
      ruf_wbx: simulationStore.ruf_wbx,
      K_G_wbx: simulationStore.K_G_wbx,
      K_F_wbx: simulationStore.K_F_wbx,
      ruf_bkx: simulationStore.ruf_bkx,
      K_G_bkx: simulationStore.K_G_bkx,
      ruf_dyyx: simulationStore.ruf_dyyx,
      K_G_dyyx: simulationStore.K_G_dyyx,
      ruf_81x: simulationStore.ruf_81x,
      K_G_81x: simulationStore.K_G_81x,
      PUMP1_WBX: wb_pump1.value ? '1' : '0',
      PUMP1_BKX: bk_pump1.value ? '1' : '0',
      PUMP1_81_701: new81_pump1.value ? '1' : '0',
      P_M_IN_WBX: wb_inPres.value,
      Q_S_OUT_WBX: wb_outFlow.value,
      T_S_OUT_WBX: wb_outTemp.value,
      TS_time: wb_stopDuration.value,
      QS_time: wb_startDuration.value,
      Time_end: simulationTime.value,
      T_g_WBX: wb_pipeTemperature.value,
      DT: chartTimeInterval.value,
      Oil_in0: wb_inputOilType.value,
      Oil_in1: bk_oilType.value,
      Oil_in2: new81_inputOilType.value,
      Q_IN1: bk_oilFlow1.value,
      Q_IN2: bk_oilFlow2.value,
      TEM_1: bk_oilTemperature1.value,
      TEM_2: bk_oilTemperature2.value,
      PUMP2_WBX: wb_pump2.value ? '1' : '0',
      PUMP2_BKX: bk_pump2.value ? '1' : '0',
      PUMP2_81_701: new81_pump2.value ? '1' : '0',
      P_M_IN_BKX: bk_inPres.value,
      Q_S_OUT_81_701: new81_outFlow.value,
      T_S_OUT_81_701: new81_outTemp.value,
      T_g_BKX: bk_pipeTemperature.value,
      PUMP3_WBX: wb_pump3.value ? '1' : '0',
      PUMP3_BKX: bk_pump3.value ? '1' : '0',
      PUMP3_81_701: new81_pump3.value ? '1' : '0',
      P_M_IN_701_ZZ: ty_inPres.value,
      T_g_701_ZZ: ty_pipeTemperature.value,
      P_M_IN_81_701: new81_inPres.value,
      T_g_81_701: new81_pipeTemperature.value
    }
    if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSQUANXIAN_WTYX({
        ...baseParams
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.qx_pig_data = res.data.pig_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    } else if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === '加减阻剂输送'
    ) {
      res = await postSPSQUANXIAN_DRA({
        ...baseParams,
        ...JZJRef.value.getParamsData()
      })

      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.qx_pig_data = res.data.pig_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    } else if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === '清管器运行'
    ) {
      res = await postSPSQUANXIAN_PIG({
        ...baseParams,
        ...QGQRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.qx_pig_data = res.data.pig_all_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    } else if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === '水力越站'
    ) {
      res = await postSPSQUANXIAN_YZ({
        ...baseParams
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.qx_pig_data = res.data.pig_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    } else if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === '输量与油温调节'
    ) {
      res = await postSPSQUANXIAN_SLTJ({
        ...baseParams,
        ...SLYWTJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.qx_pig_data = res.data.pig_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    } else if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === '管道泄漏'
    ) {
      res = await postSPSQUANXIAN_LEAK({
        ...baseParams,
        ...GDXLRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.qx_pig_data = res.data.pig_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    } else if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === 'ESD阀门异常关断'
    ) {
      res = await postSPSQUANXIAN_FMYC({
        ...baseParams,
        ...FMYCRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.qx_pig_data = res.data.pig_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    } else if (
      isEqual(operationMode.value, [
        '单油品连续输送',
        '顺序输送',
        '间歇输送',
        '密闭输送',
        '旁接罐输送'
      ]) &&
      workType.value[1] === '泵机组停运'
    ) {
      res = await postSPSQUANXIAN_PUMP({
        ...baseParams,
        ...BJZTYRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.qx_pig_data = res.data.pig_data || []
      simulationStore.wb_oil = wb_inputOilChineseName.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
    }
    // 记录最大模拟时间
    simulationStore.simulationTime = res.data.max_time_info / 60
    // 能耗优化sps_id
    simulationStore.sps_id = res.data.distance_variation_data[0].sps

    router.push({
      path: '/originOil/spatiotemporalPrediction/graph',
      query: {
        oils_id: '全线'
      }
    })
  } catch (error) {
    console.error('预测失败:', error)
    ElMessage.error('预测失败，请重试')
  } finally {
    isPredictLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
  // background-color: rgba(247, 247, 247, 1);
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
